<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="favicon.svg" type="image/svg+xml" />

    <link rel="stylesheet" href="npxy.css">

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript" src="axios.min.js"></script>

    <title>Npxy服务端</title>

</head>

<body>

    <div id="app" class="container">

        <div class="banner">
            <div>Npxy服务端</div>
        </div>

        <div class="main">
            <div class="principle">

                <svg version="1.1" width="768" height="55">

                    <rect rx="3" ry="3" x="5" y="7" width="90" height="40" fill="none" stroke="#b2b2b2"
                        stroke-width="3" />
                    <text x="30" y="32" font-size="15" font-weight="bold" fill="#636363">Client</text>

                    <line x1="100" y1="25" x2="315" y2="25" stroke="#b2b2b2" stroke-width="4" />

                    <polygon points="0,0 0,18 9,9" transform="translate(315,16)" fill="#b2b2b2" />

                    <text x="185" y="20" fill="#b2b2b2" transform-origin="100 80" font-size="12">Internet</text>

                    <rect x="328" y="2" rx="5" ry="5" width="111" height="50" fill="#77b82a" />
                    <text x="331" y="32" fill="white" font-size="15" font-weight="bold">Reverse Proxy</text>

                    <polygon points="0,9 9,0 9,18" transform="translate(445,16)" fill="#77b82a" />
                    <polygon points="0,0 0,18 9,9" transform="translate(650,16)" fill="#77b82a" />

                    <line x1="454" y1="25" x2="650" y2="25" stroke="#77b82a" stroke-width="4" />

                    <rect rx="5" ry="5" x="670" y="5" width="90" height="40" fill="transparent" stroke="#009688"
                        stroke-width="4" />
                    <text x="690" y="30" fill="#636363" font-size="15" font-weight="bold">Service</text>

                </svg>

            </div>

            <div class="message-box">
                <div class="message-success" v-if="rtnCode == 0">
                    <svg version="1.1" width="12" height="12">
                        <circle cx="6" cy="6" r="6" fill="#67C23A" />
                        <path d="M2.5 6 L5 8.5 L10 4" stroke="#ffffff" stroke-width="1" fill="none" />
                    </svg>
                    <p class="rtn-msg" >{{ rtnMsg }}</p>
                </div>
                <div class="message-error" v-if="rtnCode == -1">
                    <svg version="1.1" width="12" height="12">
                        <circle cx="6" cy="6" r="6" fill="#F56C6C" />
                        <path d="M3 3 L9 9 M9 3 L3 9" stroke="#ffffff" stroke-width="1" fill="none" />
                    </svg>
                    <p class="rtn-msg" >{{ rtnMsg }}</p>
                </div>
            </div>

            <div class="info-box">
                <div class="protocol-box">
                    <p class="description">代理协议</p>
                    <p class="content">TCP</p>
                </div>
                <div class="port-box">
                    <p class="description">服务端口</p>
                    <input type="text" class="content port-editor" v-model="port" />
                </div>
                <div class="status-box">
                    <p class="description">状态</p>
                    <div class="content">
                        <svg version="1.1" width="12" height="12">
                            <circle cx="6" cy="6" r="6" :fill="currStatus.color" />
                        </svg>
                        {{ currStatus.name }}
                    </div>
                </div>
            </div>

            <div class="control-box">


                <div>
                    <svg version="1.1" width="36" height="36" class="start-btn" @click="start">
                        <circle cx="18" cy="18" r="18" fill="#EEEEEE" />
                        <path d="M12 7.608 A12 12 0 1 0 24 7.608 M18 3 V16" stroke="#5FB878" stroke-width="4"
                            fill="none" />
                    </svg>
                    <div class="tips">启动</div>
                </div>

                <div>
                    <svg version="1.1" width="36" height="36" class="stop-btn" @click="stop">
                        <circle cx="18" cy="18" r="18" fill="#EEEEEE" />
                        <rect rx="4" ry="4" x="8" y="8" width="20" height="20" fill="#FF5722" />
                    </svg>
                    <div class="tips">停止</div>
                </div>
            </div>

        </div>


    </div>

    <script>

        var app = new Vue({
            el: '#app',
            data: {
                port: 9000,
                status: {
                    on: {
                        name: '运行中',
                        color: '#009688'
                    },
                    off: {
                        name: '停止',
                        color: '#FF5722'
                    }
                },
                currStatus: {
                    name: '停止',
                    color: '#FF5722'
                },
                rtnCode: null,
                rtnMsg: ''
            },
            beforeMount: function () {
                axios.get("/port")
                    .then(res => {
                       this.port = res.data.data
                    })
            },
            methods: {
                start: function () {
                    axios.post("/start", { port: this.port })
                        .then(res => {
                            this.rtnCode = res.data.code
                            this.rtnMsg = res.data.message

                            setTimeout(() => {
                                this.rtnCode = null
                            }, 3000)

                            if (res.data.code == 0) {
                                this.currStatus = this.status.on
                            } else {
                                this.currStatus = this.status.off
                            }
                        })
                },
                stop: function () {
                    axios.post("/stop")
                        .then(res => {
                            this.rtnCode = res.data.code
                            this.rtnMsg = res.data.message

                            setTimeout(() => {
                                this.rtnCode = null
                            }, 3000)

                            if (res.data.code == 0) {
                                this.currStatus = this.status.off
                            } else {
                                this.currStatus = this.status.on
                            }
                        })
                }
            }
        })
    </script>
</body>

</html>